<template>
<div class="box">
    <fou-dialog :title="'選擇學生'" v-model:dialogValue="studentDia" :width="'75%'">
        <template #content="">
                <!-- <el-button color="#081F42" :disabled="delsable" @click="choice()">多選{{num}}</el-button> -->
                <ProTable
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
                @page-change="onPageChange"
                @pageRefresh="pageRefresh"
                
                >
                <template #default="{ row, propname }">
                    <div  v-if="propname === 'school'  ">
                          {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
                    </div>
                    <div v-if="propname === 'cate'">
                         <div v-if="row[propname]" >{{row[propname] && row[propname].name ? row[propname].name : row[propname]}}</div>
                    </div>
                    <div v-if="propname === 'card_number'">
                         <el-tag v-if="row[propname]" type="success">已綁定</el-tag>
                        <el-tag  v-if="!row[propname]" type='warning'>未綁定</el-tag>
                    </div>
                </template>
                <template #search_operate>
                    <el-table-column  fixed="right" min-width="200px" >
                        <template #header>
                                <el-input @keyup.enter="getSearch" clearable v-model="search" placeholder="搜索(內容)" class="input">
                                    <template #append>
                                    <el-button icon="Search" @click="getSearch"></el-button>
                                    </template>
                                </el-input>
                        </template>
                        <template #default="scope">
                            <el-button  color="#081F42"  @click="handleSelect(scope.$index, scope.row)" >選擇</el-button >
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
        </template>
    </fou-dialog>
</div>
</template>

<script setup>
import { ref ,reactive} from 'vue' 
import {studentList} from '@/http/index.js'
import {elProps,controlWidth} from './student'
import { loading ,closeLoading} from '@/common/function.js'

const emit = defineEmits(['update'])
const handleSelect=(index,row)=>{
 emit('update',row)
 studentDia.value = false
}

const page = reactive({current_page: 1,per_page: 10,total: 10,page_size: [10, 20, 30]})
const search = ref('')
const getSearch = async()=>{
    obj.name = search.value
    await TableData()
}
const onPageChange = async({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    obj.page = e;
  }
  if (type == "size") {
    obj.page = 1
    obj.limit = e;
  }
    await TableData()
};
const pageRefresh = async () => {
  obj.page = 1
  await TableData();
};

const obj = reactive({
  school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  name: '',
  status:1,
});
const studentDia = ref(false)
const tableData = ref([])
const TableData = async()=>{
    loading()
    const data = await studentList(obj)
    if (data.code == 200 ) {
        tableData.value = data.data.data
        page.total = data.data.total
        page.current_page = data.data.current_page
        page.per_page = data.data.per_page
    }
    closeLoading()
}
const column = {
    card_number:'卡號綁定狀態',
    // school:'學校',
    name:'名稱(中文)',
    ename:'名稱(英文)',
    cate:'類別',
    birthday:'出生日期'
}
defineExpose({
studentDia,TableData
})
</script>

<style lang='less'  scoped>
.box{
  :deep(.el-dialog__body){
  padding:0 20px!important;
  }
  :deep(.el-dialog__footer){
    padding: 0 !important;

  }
  :deep(.tableflex[data-v-0985d712]){
    margin-top: 15px;
  }
}
</style>